<template>
  <el-card>
    <template #header>
      <div class="card-header">
        <span>人员管理</span>
        <div class="card-header-btn">
          <el-button type="primary" @click="dialogFormVisible = true">新增</el-button>
        </div>
      </div>
    </template>
    <div class="member-table">
      <el-table :data="memberList" stripe style="width: 100%" table-layout="fixed">
        <el-table-column type="index" label="编号" width="150px" />
        <el-table-column prop="memName" label="姓名" />
        <el-table-column prop="memNumber" label="手机号" />
        <el-table-column label="操作">
          <template #default="scope">
            <el-tooltip class="box-item" effect="dark" content="职位变迁" placement="top">
              <el-button type="primary" :icon="Tools" circle @click="handleEdit(scope.row)" />
            </el-tooltip>
            <el-tooltip class="box-item" effect="dark" content="删除角色" placement="top">
              <el-button type="danger" :icon="Delete" circle @click="handleDelete(scope.row)" />
            </el-tooltip>
          </template>
        </el-table-column>
        <!--        <el-table-column prop="remarks" label="备注" />-->
        <el-table-column type="expand">
          <template #default="scope">
            <el-descriptions class="margin-top" title="详情信息" :column="3" size="large" border>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">
                    <el-icon><Avatar /></el-icon>
                    姓名
                  </div>
                </template>
                {{ scope.row.memName }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">
                    <el-icon><PhoneFilled /></el-icon>
                    电话
                  </div>
                </template>
                <el-tag>{{ scope.row.memNumber }}</el-tag>
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">
                    <el-icon><GoodsFilled /></el-icon>
                    性别
                  </div>
                </template>
                <el-tag>{{ scope.row.memSex }}</el-tag>
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">
                    <el-icon><Timer /></el-icon>
                    出生日期
                  </div>
                </template>
                {{ scope.row.memBirthday }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">
                    <el-icon><ToiletPaper /></el-icon>
                    角色信息
                  </div>
                </template>
                <el-tag>{{ scope.row.roleId }}</el-tag>
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">
                    <el-icon><Memo /></el-icon>
                    备注
                  </div>
                </template>
                {{ scope.row.remarks }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">
                    <el-icon>
                      <office-building />
                    </el-icon>
                    家庭住址
                  </div>
                </template>
                {{ scope.row.address }}
              </el-descriptions-item>
            </el-descriptions>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination-block">
        <el-pagination
          :current-page="pageInfo.currentPage"
          :page-size="pageInfo.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageInfo.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :pager-count="5"
          :page-sizes="pageInfo.pageSizes"
          prev-text="上一页"
          next-text="下一页"
        />
      </div>
    </div>

    <template #footer>
      <div class="card-footer">欢迎来到人员管理页面@YTH科技有限公司</div>
    </template>
  </el-card>
</template>

<script setup>
import {
  Avatar,
  Delete,
  GoodsFilled,
  Memo,
  OfficeBuilding,
  PhoneFilled,
  Timer,
  ToiletPaper,
  Tools
} from '@element-plus/icons-vue'
import { useMemberStore } from '@/stores/member/member.js'
import { storeToRefs } from 'pinia'
import { onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

const memberStore = useMemberStore()
const { memberList, pageInfo, dialogFormVisible, drawerVisible } = storeToRefs(memberStore)

const handleSizeChange = (val) => {
  // console.log(`${val} items per page`)
  pageInfo.value.pageSize = val
  memberStore.getMemberList()
}
const handleCurrentChange = (val) => {
  // console.log(`current page: ${val}`)
  pageInfo.value.currentPage = val
  memberStore.getMemberList()
}

const handleEdit = (row) => {
  memberStore.currentMember.value = row
  drawerVisible.value = true
}

const handleDelete = (row) => {
  ElMessageBox.confirm('你的操作将会删除该角色，是否继续？', '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      memberStore.deleteMember(row.memId)
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '操作取消'
      })
    })
}
</script>

<style lang="scss" scoped>
.el-card {
  width: 100%;
  height: 100%;

  .card-header {
    font-size: 25px;
    font-weight: bold;
    .card-header-btn {
      float: right;
      margin-right: 40px;
    }
  }

  .card-footer {
    font-size: 20px;
    text-align: right;
    color: #a1a1a5;
    margin-top: 10px;
  }

  .member-table {
    .el-table {
      height: 480px;
      .el-table-column {
        font-size: 18px;
      }
    }
    .member-remarks {
      min-height: 8px;
      min-width: 80%;
      margin-left: 50px;
      margin-right: 10px;
      font-size: 15px;
      color: #a1a1a5;
    }
    .pagination-block {
      display: flex;
      justify-content: center;
      align-items: center; /* 如果需要垂直居中 */
      text-align: center; /* 保持文本居中 */
      margin-top: 30px;
    }
    .margin-top {
      margin-top: 20px;
      .cell-item {
        display: flex;
        align-items: center;
        gap: 5px;
      }
    }
  }
}
</style>
